<template>
  <div class="songlist">
    <!-- 歌单上部 创建者部分 -->
    <artistInfo></artistInfo>

    <!-- 歌单下部 音乐列表部分 -->
    <musicList></musicList>
  </div>
</template>

<script>
import musicList from './songlisttemplate/musiclist.vue'
import artistInfo from './songlisttemplate/artistdetail.vue'

import { mapState, mapMutations } from 'vuex'

export default {
  components: { musicList, artistInfo },
  props: {
    data: Object,
  },
  data() {
    return {}
  },
  computed: {
    ...mapState(['songlistId']),
  },
  created() {
    this.routerIsActiveInfo()
  },
  methods: {
    ...mapMutations(['changeIsActive']),

    // 子传父函数，接收传递过来的 侧边栏信息
    routerIsActiveInfo() {
      // 将数据传递给父级组件
      const info = {
        isActive: this.songlistId,
      }

      this.changeIsActive(info.isActive)
    },
  },
}
</script>


<style lang="less" scoped>
.songlist {
  display: flex;
  flex-direction: column;
  overflow: auto;
}
</style>